<template>
  <div class="flex flex-rc rel">
    <div class="title title--bg">{{ $t('下单明细') }}</div>
    <div class="refresh-btn">
      <div
        class="btn btn--small click"
        :class="refreshDisabled ? 'btn--disabled' : ''"
        @click="
          () => {
            if (!refreshDisabled) {
              refreshDisabled = true
              page = 1
              getPlay1OrderList()
            }
          }
        "
      >
        {{ $t('刷新明细') }}
      </div>
    </div>
  </div>

  <div v-if="records.length">
    <!-- 列表 -->
    <ul>
      <li class="container fz-12 mb-15" v-for="(v, i) in records" :key="i">
        <div>
          <span>{{ $t('下单明细') }}下单金额：</span>
          <span class="cl-primary">{{ v.orderAmount }} PC</span>
        </div>
        <div class="flex">
          <div style="width: 50%">
            <span>{{ $t('下单方向') }}：</span>
            <span class="cl-primary">{{ v.direction }}</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('中奖金额') }}：</span>
            <span class="cl-primary">{{ v.winningAmount }} PC</span>
          </div>
        </div>
        <div class="flex">
          <div style="width: 50%">
            <span>{{ $t('下单区块') }}：</span>
            <span class="cl-primary">{{ v.height }}</span>
          </div>
          <div style="width: 50%">
            <span>{{ $t('开奖区块') }}：</span>
            <span class="cl-primary">{{ v.winningBlockHeight }}</span>
          </div>
        </div>
        <div>
          <span>{{ $t('开奖哈希') }}：</span>
          <span>{{ v.winningBlockHash }}</span>
        </div>
        <div>
          <span>{{ $t('时间') }}：</span>
          <span>{{ v.createTime }}</span>
        </div>
      </li>
    </ul>

    <!-- 分页 -->
    <van-pagination
      mode="simple"
      :prev-text="$t('上一页')"
      :next-text="$t('下一页')"
      :total-items="total"
      :items-per-page="size"
      @change="getPlay1OrderList"
      v-model="page"
    ></van-pagination>
  </div>

  <!-- 空数据 -->
  <van-empty v-else>
    <div class="cl-white">{{ $t('暂无数据') }}</div>
  </van-empty>
</template>

<script setup>
import { ref } from 'vue'
import mitt from 'js/mitt'
import api from 'js/api'

const page = ref(1)
const size = ref(5)
const total = ref(0)
const records = ref([])
const refreshDisabled = ref(false)

getPlay1OrderList()

mitt.on('refresh', () => {
  setTimeout(() => {
    page.value = 1
    getPlay1OrderList()
  }, 3000)
})

// 获取下单明细
async function getPlay1OrderList() {
  const params = {
    current: page.value,
    size: size.value,
  }

  const { code, data } = await api.getPlay1OrderList(params)

  if (code === 200) {
    total.value = data.total
    records.value = data.records

    setTimeout(() => {
      refreshDisabled.value = false
    }, 6000)
  }
}
</script>

<style lang="scss" scoped>
.refresh-btn {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
